<template>
    <div class="list">

        <i-header>可开红包：{{total}}</i-header>

        <cube-scroll
                v-if="data.length"
                ref="scroll"
                :options="scroll_option"
                @pulling-up="upLoad"
        >
            <red-item v-for="item in data"
                      :key="item.id"
                      :data="item"
                      @click.native="clickRed(item.id)"
            >
            </red-item>
        </cube-scroll>

        <!--S空列表-->
        <empty v-else>暂无红包</empty>
        <!--E空列表-->
    </div>
</template>

<script>
import header from "./components/header"
import RedItem from "@c/red-item"
import Empty from "@c/empty"
import store from "@/store"
export default {
    name: "list",
    data() {
      return {
          // 可开红包总数
          total: 0,
          // 红包列表数据
          data: [],
          // 请求数量
          limit: [0,10],
          // 滚动条配置
          scroll_option: {
              scrollbar:true,
              pullUpLoad:{
                  txt:{
                      more:"上拉加载",
                      noMore:"----我也是有底线的----"
                  }
              }
          }
      }
    },
    components: {
        'i-header': header,
        RedItem,
        Empty
    },
    mounted() {
        this.getTotal()
        this.getList()
    },
    methods: {
        // Run
        // Run
        /**
         * 获取红包列表
         */
        getList() {
            this.$post("red/getHomeList",{
                limit: this.limit
            })
                .then((res) => {
                    console.log(res)
                    let {code, data} = res.data
                    if(code === 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false);
                    } else {
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                    }
                })
        },
        getTotal() {
            this.$post("red/getHomeListTotal")
                .then((res) => {
                    let {code, data} = res.data
                    if(code === 0) {
                        this.total = data
                    }
                })
        },
        /**
         * 上拉加载
         */
        upLoad() {
          this.getList()
        },
        // 列表图片加载
        imgLoad() {
            this.$refs.scroll.refresh()
        },
        // 点击红包
        clickRed(red_id) {
            store.commit('enter_red',red_id)
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="less" src="./list.less"></style>
